<template>
    <s-card title="时间设置">
        <s-form style="width:100%">
            <s-form-item label="当前时间">
                <span>{{time}}</span>
            </s-form-item>
            <s-form-item label="时间设置">
                <Datepicker v-model="newTime" locale="zh-cN" cancelText="取消" selectText="确定" placeholder="请选择时间"/>
            </s-form-item>
        </s-form>
        <template #footer>
            <s-button type="primary" @click="updateTime">应用</s-button>
        </template>
    </s-card>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import {
   SCard,
   SFormItem,
   SForm,
   SButton,
   Message
} from "@/components"
import Datepicker from "@vuepic/vue-datepicker"
import "@vuepic/vue-datepicker/dist/main.css"
import { useTime } from "@/hooks"
const { time, timeFormater, setTime, refreshTime } = useTime()

const newTime = ref<string>("")
const updateTime = () => {
   setTime({ time: timeFormater("YYYY.MM.DD-hh:mm:ss", newTime.value) }).then(res => {
      if (res) {
         refreshTime()
         Message.success("设置成功")
      }
   })
}

</script>

<style lang="less">
.edit_txt{
    color:@primary;
    margin-left: @itemSpace;
    cursor: pointer;
}
</style>
